export default {
  name: 'Roles',
  data () {
    return {
      roleList: [],
      // 添加角色
      addRolesDialog: false,
      addRolesInfo: {},
      addRolesRules: {
        roleName: [
          { required: true, message: '请填写角色名称', trigger: 'change' }
        ],
        roleDesc: [
          { required: true, message: '请填写角色名称', trigger: 'change' }
        ]
      },
      // 编辑角色信息
      editRolesInfoDialog: false,
      editRolesInfo: {
        roleName: '',
        roleDesc: '',
        id: 0
      },
      // 分配权限
      editRightsDialog: false,
      // 权限列表 树状
      rightsList: [],
      // 权限列表中选中的 数组
      checkedRightsList: [],
      // 默认展开的 数组
      expendRightsList: [],
      // 权限树的信息
      rightsTreeInfo: {
        // 表示数据中的哪一个属性名是显示的文本文内容
        // 以你数据中的 title 项为显示的文本
        label: 'authName',
        // 表示数据中哪一个属性名是你需要的二级选项
        // 以你数据中的 children 项为二级菜单
        children: 'children'
      },
      // 角色 id
      roleId: 0
    }
  },
  created () {
    this.getRolesList()
    this.getRightsList()
  },
  methods: {
    async getRolesList () {
      const { data } = await this.$get('roles')
      this.roleList = data
    },
    closeAddUserDialogHandler () {
      this.$refs.addRoles.resetFields()
      this.addRolesInfo = {}
    },
    // 添加
    addRolesHandler () {
      this.$refs.addRoles.validate(async valid => {
        if (!valid) {
          this.$message({
            type: 'error',
            message: '请按照规则完整填写表单'
          })
          return
        }
        const { meta } = await this.$post('roles', this.addRolesInfo)
        if (meta.status === 201) {
          this.$message({
            type: 'success',
            message: '创建角色成功'
          })
          this.getRolesList()
          this.addRolesDialog = false
        }
      })
    },
    // 删除
    deleteRolesHandler (id) {
      this.$confirm('您真的要删除该角色吗 ? ', '删除角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 发送删除的请求
        const { meta } = await this.$delete(`roles/${id}`)
        if (meta.status === 200) {
          this.$message({
            type: 'success',
            message: '删除该角色成功'
          })

          // 从新请求角色列表
          this.getRolesList()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑
    showEditInfoDialog (val) {
      // 接受一些参数
      // 把信息存储起来
      this.editRolesInfo.id = val.id
      this.editRolesInfo.roleDesc = val.roleDesc
      this.editRolesInfo.roleName = val.roleName

      // 展开对话框
      this.editRolesInfoDialog = true
    },
    async editRolesInfoHandler () {
      // 直接发送请求进行修改
      const { meta } = await this.$put(`roles/${this.editRolesInfo.id}`, this.editRolesInfo)

      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '修改成功'
        })

        // 从新请求列表数据
        this.getRolesList()

        // 关闭对话框
        this.editRolesInfoDialog = false
      }
    },
    // 分配权限
    // 请求所有权限列表
    async getRightsList () {
      const { data } = await this.$get('rights/tree')
      // 把数据赋值
      this.rightsList = data

      // 所有项都展开
      // 我们需要拿到所有项的 id, 放在 expendRightsList 数组内
      // 遍历 data 数组, 把里面所有的 id 都拿到, 放在 expendRightsList 内
      data.forEach(item => {
        this.expendRightsList.push(item.id)

        // 继续遍历 item.children 二级菜单
        // 也把 id 放在 expredRightsList 内
        item.children.forEach(t => {
          this.expendRightsList.push(t.id)
        })
      })
    },
    // 展开分配渲染对话框
    showEditRightsHandler (val, id) {
      // 给 this.roleId 进行赋值
      this.roleId = id
      // 拿到 val 中所有项的 id
      // 以及所有 children 内的 children 内的 id
      // 注意: 实际应该获取所有三级权限的 id
      val.forEach(item => {
        if (!item.children) return

        // 遍历二级权限
        item.children.forEach(t => {
          if (!t.children) return

          // 遍历三级权限
          t.children.forEach(t2 => {
            // 把三级权限的 id 填充到 checkedRightList 内
            this.checkedRightsList.push(t2.id)
          })
        })
      })

      // 展开对话框
      this.editRightsDialog = true
    },
    // 关闭全选分配对话框的事件处理函数
    closeRightsDialog () {
      // 让 checkedRightList 数组归零
      this.checkedRightsList = []
    },
    async editRightHandler () {
      // 拿到 tree 组件中哪些是选中的
      // 拿到 tree 组件中所有 选中 和 半选中 的节点的 id
      // 拿到 tree 组件中所有选中的项的 id
      const checkedIds = this.$refs.rightsTree.getCheckedKeys()
      // 拿到 tree 组件中所有半选中项的 id
      const halfCheckedIds = this.$refs.rightsTree.getHalfCheckedKeys()

      // 需要做的事情就是把这两个数组合并在一起发送给后端
      // 准备参数
      const rids = [...checkedIds, ...halfCheckedIds] + ''
      // 如果你的数组内全部都是基本数据类型
      // 会在进行字符串拼接的时候, 自动转换成 join(',) 的形式

      const { meta } = await this.$post(`roles/${this.roleId}/rights`, { rids })

      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '分配权限成功'
        })

        // 从新请求角色列表
        this.getRolesList()

        // 关闭对话框
        this.editRightsDialog = false
      }
    },
    async deleteRightHandler (roleId, rightId) {
      const { meta } = await this.$delete(`roles/${roleId}/rights/${rightId}`)
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '删除单一权限成功'
        })
        let rights = []
        for (let i = 0; i < this.roleList.length; i++) {
          if (this.roleList[i].id === roleId) {
            rights = this.roleList[i].children
          }
        }
        for (let i = 0; i < rights.length; i++) {
          const first = rights[i]
          if (first.id === rightId) {
            rights.splice(i, 1)
            break
          }
          for (let j = 0; j < first.children.length; j++) {
            const second = first.children[j]
            // 判断 second.id === rightId 说明刚找到我要删除的哪一个了
            if (second.id === rightId) {
              // 从 first.children 中删除索引为 j 的这一条
              first.children.splice(j, 1)
              break
            }
            for (let j = 0; j < second.children.length; j++) {
              const third = second.children[j]
              // 判断 third.id === rightId 说明刚找到我要删除的哪一个了
              if (third.id === rightId) {
                // 从 second.children 中删除索引为 j 的这一条
                second.children.splice(j, 1)
                break
              }
            }
          }
        }
      }
    }
  }
}
